WxCountUp - 数字滚动（微信小程序插件）

github地址

插件介绍

该插件是参照 CountUp.js 封装的，为小程序提供的数字滚动，以更有趣的方式显示数值数据。

WxCountUp

参数说明

Params

参数	类型	描述
target	`String`	滚动对象
endVal	`Number`	滚动结束时的数字
options	`Object`	配置
context	`Object`	微信小程序当前this对象，`必填`

Options （非必填项）

参数	类型	描述
startVal	`Number`	滚动开始时的数字，默认为`0`
decimalPlaces	`Number`	小数位数，默认为`0`
duration	`Number`	动画间隔时间，默认为`2`秒
useGrouping	`Boolean`	是否按组间隔，默认为`true`。例如：1,000 vs 1000
useEasing	`Boolean`	是否使用缓动效果，默认为`true`
smartEasingThreshold	`Number`	如果使用缓动，则对大于此值的大数值平滑缓动，默认为`999`
smartEasingAmount	`Number`	超过阈值的数字将被放宽，默认为`333`
separator	`String`	按组间隔标识，默认为’`,`‘
decimal	`String`	小数点标识，默认为’`.`‘
easingFn	`Function`	例如 `(t: number, b: number, c: number, d: number) => number;`
formattingFn	`Function`	例如 `(n: number) => string;`
prefix	`String`	以结果为前缀的文本，默认为空
suffix	`String`	以结果为后缀的文本，默认为空
numerals	`String`	数字符号替换

使用方法

import WxCountUp from '../../plugins/wx-countup/WxCountUp.js'

Page({
  data: {
    number: 0
  },
  onLoad: function () {
    // 最后一个参数必填
    this.countUp = new WxCountUp('number', 5234, {}, this);
  },

  start() {
    this.countUp = new WxCountUp('number', 5234, {}, this);
    // 开始动画
    this.countUp.start();
    // this.countUp.start(() => console.log('Complete!'));
  },

  pauseResume() {
    // 暂停/重新开始
    this.countUp.pauseResume();
  },

  reset() {
    // 重置
    this.countUp.reset();
  },

  update() {
    // 更新为新值
    this.countUp.update(1000);
  },
})

更多方法及配置参考 CountUp.js

更改部分

CountUp.js 源代码使用 document 浏览器提供的DOM操作接口，在微信小程序中并不支持。只能通过传入一个 this (当前上下文对象) 来 setData 改变数据。
在真机调试的时候，发现真机不支持 requestAnimationFrame 方法，只得通过 setTimeout 来模拟出 requestAnimationFrame 的效果。